<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="/static/vue/vue.js"></script>
    <script src="/static/axios/axios.js"></script>
    <%--    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--%>
    <script src="https://unpkg.com/axios@0.21.1/dist/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/static/element/index.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>图书商城</title>
</head>
<style>
    .pc-search-items-list {
        width: 1190px;
        font-size: 0;
        font-family: 'helvetica neue', tahoma, 'hiragino sans gb', stheiti, 'wenquanyi micro hei', sans-serif;
        border-top: 1px solid #f2f2f2;
        border-left: 1px solid #f2f2f2;
    }

    .pc-search-items-list .pc-items-item {
        width: 236px;
        height: 368px;
        box-sizing: border-box;
        display: inline-block;
        font-size: 12px;
        border: 1px solid #f2f2f2;
        border-top: none;
        border-left: none;
        background: #fff;
        vertical-align: top;
    }

    .pc-search-items-list .pc-items-item-a {
        display: inline-block;
        width: 234px;
        height: 366px;
        box-sizing: border-box;
        padding: 22px 20px 0;
        background: #fff;
        position: relative;
    }

    .pc-search-items-list .pc-items-item-img {
        width: 198px;
        height: 198px;
    }

    .search {
        width: 350px;
        /*height: 68px;*/
        /*display: inline;*/
        /*vertical-align: top;*/
        position: relative;
        top: -50px;
        left: 800px;
    }

    .search .search-border {
        border-right: 0;
        height: 34px;
        position: relative;
    }

    .search .search-border .text-wrap .text {
        height: 23px;
        line-height: 23px;
        font-size: 12px;
        border: 0;
        width: 100%;
        outline: 0;
    }

</style>
<body>
<div id="app">
    <el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1"><a href="/">首页</a></el-menu-item>
        <el-menu-item index="2"><a href="/goShoppingCart">购物车</a></el-menu-item>
        <el-menu-item index="3"><a href="/goUser">${user.userName} 个人中心 </a></el-menu-item>
        <c:if test="${user.id!=null}">
            <el-menu-item index="3"><a href="/logout">注销 ${user.userName}</a></el-menu-item>
        </c:if>
    </el-menu>
    <div class="search" align="center">
        <div class="search-border clearfix">
            <el-input placeholder="请输入内容" v-model="searchKey">
                <%--            v-on:keyup.enter="searchGoods"     @click="searchGoods"--%>
                <el-button slot="append" @click="searchGoods" v-on:keyup.enter="searchGoods" icon="el-icon-search">搜索
                </el-button>
            </el-input>
        </div>
    </div>


    <div align="center">
        <ul class="pc-search-items-list">
            <li class="pc-items-item item-undefined" v-for="goods in goodsList">
                <a :href="'/goGoods/'+goods.id" class="pc-items-item-a">
                    <img :src="goods.goodsImage" class="pc-items-item-img img-loaded">
                    <h3> 类别 : {{goods.goodsType}} -</h3> <br>
                    <h4>{{goods.goodsName}}- {{goods.goodsPrice}} ￥</h4>
                    <h4>销量: {{goods.SaleCount}}</h4>
                </a>
            </li>
            <p v-if="goodsList.size=0">
                没有该商品
            </p>
        </ul>


        <el-pagination
                background
                layout="prev, pager, next"
                @current-change="getGoodsList"
                :current-page="current"
                :page-count="pages"
                :total="total">
        </el-pagination>
    </div>


</div>
<script type="application/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            searchKey: "",
            message: "33",
            name: "like",
            goodsList: [],
            current: 1,
            pages: 0,
            pageSize: 20,
            size: 0,
            total: 0,
            res: Object
        },
        created() {
            console.log("hello")
            this.getGoodsList(this.current)
        },
        methods: {
            searchGoods() {
                console.log(this.searchKey);
                current = this.current
                axios.request({
                    url: "/goods/list/" + current + "/" + this.pageSize,
                    method: "get",
                    params: {
                        "goodsName": this.searchKey,
                    }
                }).then(res => {
                    this.res = res.data
                    this.goodsList = this.res.data.records
                    this.current = this.res.data.current
                    this.pages = this.res.data.pages
                    this.size = this.res.data.size
                    this.total = this.res.data.total
                });
            },
            getGoodsList(current) {
                console.log("current：" + current);
                axios.request({
                    url: "/goods/list/" + current + "/" + this.pageSize,
                    method: "get",
                    params: {
                        "goodsName": "",
                    }
                }).then(res => {
                    this.res = res.data
                    this.goodsList = this.res.data.records
                    this.current = this.res.data.current
                    this.pages = this.res.data.pages
                    this.size = this.res.data.size
                    this.total = this.res.data.total
                });

            }
        }
    })
</script>
</body>
</html>